import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {viewportWidth} from '@/utils/index';
import {Icategorys} from '@/common/type';
export const parentWidth = viewportWidth - 20;
export const itemWidth = parentWidth / 4;
export const itemHeight = 50;
const style = StyleSheet.create({
  item: {
    width: itemWidth,
    height: itemHeight,
  },
  innerItem: {
    flex: 1,
    margin: 5,
    borderRadius: 4,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
interface Iprops {
  data: Icategorys;
}

class CategoryItem extends React.Component<Iprops> {
  render(): React.ReactNode {
    const {data} = this.props;
    return (
      <View style={style.item}>
        <View style={style.innerItem}>
          <Text>{data.name}</Text>
        </View>
      </View>
    );
  }
}

export default CategoryItem;
